<script setup lang="ts">

import {ref,watch} from "vue";
import {graphic} from "echarts/core";
import {cloneDeep} from "lodash-es";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  },
  isKey:{
    type:Boolean,
    default:false
  }
})

const option = ref({});

const setOption = async (yData: any[], yData2: any[]) => {
  option.value = {
    xAxis: [{
      type: "category",
      data: Array.from({length:13},(_,i)=>`${i * 5}s`),
      splitLine: {
        show: true,
        lineStyle: {
          color: "#CCCCCC",
          type: 'dashed',
        },
      },
      axisLine: {
        show:true,
        lineStyle: {
          color: "rgba(251, 45, 25, 1)",
        },
      },
      axisLabel: {
        color: "#808080",
        fontWeight: "500",
        interval: 1,
      },
      axisTick:{
        show:false
      },
    }],
    yAxis:{
      name: '',
      type: "value",
      minInterval:1,
      nameTextStyle: {
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      axisLine: {
        show:false,
      },
      axisTick:{
        show:false
      },
      axisLabel: {
        show:true,
        color: "#808080",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      formatter:(name:any)=>{
        return `<div>
<div>${name[0].marker}${name[0].seriesName?.split('{')[0]}: ${name[0].data}</div>
<div>${name[1].marker}${name[1].seriesName?.split('{')[0]}: ${name[1].data}</div>
</div>`
      }
    },
    grid: {
      //布局
      show: false,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "50px",
      containLabel: true,
    },
    legend: {
      top:'5',
      right: '0',
      icon: 'circle',
      textStyle:{
        color:'#4D4D4D',
        fontSize: 12,
        rich:{
          a:{
            color:'#808080',
            fontSize: 10
          }
        }
      }
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: `呼吸曲线{a|(范围:12-20)}`,
        color: "rgba(9, 205, 213, 1)",
      },
      {
        data: yData2,
        yAxisIndex:0,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: `心率曲线{a|(范围:60-100)}`,
        color: "rgba(254, 81, 95, 1)",
      },
    ],
  };
};

watch(()=>props.data, (newval:any)=>{
  const val = cloneDeep(newval)
  setOption(val.breathingNum?.reverse(),val.heartRateNum?.reverse())
},{
  deep:true,
  immediate:true
})

</script>

<template>
  <div class="flex flex-col">
    <div class="flex ml-[57px] mt-[29px]">
      <img v-if="!data.peopleFlag" class="w-[140px] h-[114px]" src="@/assets/img/icon/4.png" alt="">
      <img v-else class="w-[140px] h-[114px]" src="@/assets/img/icon/24.png" alt="">
      <div class="ml-[17px]">
        <div>
          <div class="flex items-center">
            <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt=""/>
            <div class="text-[14px] font-medium text-[#4D4D4D] ml-[2px]">设备情况</div>
          </div>
          <div class="bg-b ml-[5px] mt-[6px]"></div>
        </div>
        <div class="mt-[16px] flex items-center justify-center">
          <div v-if="!isKey" class="w-[88px] h-[64px] bg flex flex-col justify-center items-center">
            <img class="w-[22px] h-[22px]" src="@/assets/img/icon/3.png" alt="">
            <div class="text-[16px] text-[#808080] font-medium mt-[4px]">离线</div>
          </div>
          <div v-else class="w-[88px] h-[64px] bg-1 flex flex-col justify-center items-center">
            <img class="w-[22px] h-[22px]" src="@/assets/img/icon/23.png" alt="">
            <div class="text-[16px] text-[#1A1A1A] font-medium mt-[4px]">在线</div>
          </div>
          <div v-if="!data.peopleFlag" class="w-[88px] h-[64px] ml-[48px] bg flex flex-col justify-center items-center">
            <img class="w-[22px] h-[22px]" src="@/assets/img/icon/2.png" alt="">
            <div class="text-[16px] text-[#808080] font-medium mt-[4px]">离床</div>
          </div>
          <div v-else class="w-[88px] h-[64px] ml-[48px] bg-1 flex flex-col justify-center items-center">
            <img class="w-[22px] h-[22px]" src="@/assets/img/icon/22.png" alt="">
            <div class="text-[16px] text-[#1A1A1A] font-medium mt-[4px]">卧床</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ml-[46px] mr-[55px] relative">
      <div class="flex items-center text-[#333333] text-[12px] absolute top-0 left-0">
        <div class="rounded-[18px] w-[60px] h-[28px] border-[#09CDD5] border-[1px] flex items-center justify-center">
          <span class="text-[18px] font-medium">{{ data.breathingAverage || 0  }}</span>
          <span class="mt-[2px]">次/分</span>
        </div>
        <div class="rounded-[18px] w-[60px] h-[28px] border-[#FB2D19] border-[1px] flex items-center justify-center ml-[10px]">
          <span class="text-[18px] font-medium">{{ data.heartAverage || 0 }}</span>
          <span class="mt-[2px]">次/分</span>
        </div>
      </div>
      <v-chart class="chart" :option="option"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg-b{
  width: 271px;
  height: 2px;
  background: linear-gradient( 99deg, rgba(77,77,77,0.8) 0%, rgba(77,77,77,0.73) 31%, rgba(77,77,77,0) 100%);
}

.bg{
  background: url("@/assets/img/icon/1.png") 0 0/100% 100% no-repeat;
}

.bg-1{
  background: url("@/assets/img/icon/21.png") 0 0/100% 100% no-repeat;
}

.chart{
  width: 100%;
  height: 224px;
}
</style>
